<template>
  <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
    ·
    <!-- 首行 -->
    <tr class="title">
      <td width="50">
        <input type="checkbox" name="" class="choose_all" v-model="isAll" />
      </td>
      <td width="100" class="">
        <span style="margin-left: -10px">全选</span>
      </td>
      <td width="400">商品信息</td>
      <td width="150">单价（元）</td>
      <td width="150">数量</td>
      <td width="150">金额（元）</td>
      <td width="80">操作</td>
    </tr>

    <!-- 商品具体信息 -->

    <tr class="row" v-for="item in list" :key="item.id">
      <td>
        <input
          type="checkbox"
          name=""
          class="choose"
          v-model="item.isSelected"
        />
      </td>
      <td class="tal">
        <a href="#" class="pic"><img :src="item.img" alt="" /></a>
      </td>
      <td class="tal">
        <a href="#">{{ item.name }}</a>
      </td>
      <td>
        <del class="tdl">{{ item.oldPrice }}</del>
        <br />
        <b class="unit">{{ item.price }}</b>
      </td>
      <td>
        <div class="amount">
          <a href="#" class="Increase" @click="zhengjia(item.id)">+</a>
          <input type="text" class="unum" v-model="item.count" />
          <a href="#" class="Reduce" @click="jianshao(item.id)">-</a>
        </div>
      </td>
      <td>
        <b class="u-price">{{ item.price * item.count + ".00" }}</b>
      </td>
      <td><a href="#" class="btn-del" @click="chanshu(item.id)">删除</a></td>
    </tr>
    <tr class="count">
      <td colspan="7">
        <div class="jiesuan clearfix">
          <div class="left fl">
            <p>
              <input
                type="checkbox"
                name=""
                class="choose_all"
                v-model="isAll"
              />
              全选&nbsp;&nbsp;&nbsp;
              <a href="#" class="del_check" @click="chanshu()">删除选中商品</a>
            </p>
          </div>
          <div class="right fr clearfix">
            <p>商品总计:￥{{ unitPrice }}</p>
            <p>活动优惠：-￥{{ originalPrice - unitPrice }}</p>
            <p>
              已选商品<span class="red t-number"> {{ leftCout }} </span>件
              总价(不含运费、税费):<span class="red t-price">￥{{maney}}</span>
            </p>
            <!-- <div><a href="#" class="btn pay">结算</a></div> -->
            <a href="#" class="btn pay fr" @click="jiesuan()">结算</a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  name: "CommoDity",
  props: {
    list: Array,
    // TotalAmount
  },
  components: {},
  data() {
    return {
      fale: "fales",
      id: "",
      shuzi: "1",
      maney:''
    };
  },
  computed: {
    isAll: {
      get() {
        return this.list.every((item) => item.isSelected === true);
      },
      set(vale) {
        this.list.forEach((item) => (item.isSelected = vale));
      },
    },
    leftCout() {
      return this.list.filter((item) => item.isSelected).length;
    },
    unitPrice() {
      let i = 0;
      this.list.forEach((item) => {
        i += item.count * item.price;
      });
      return i;
    },
    originalPrice() {
      let i = 0;
      this.list.forEach((item) => {
        i += item.count * item.oldPrice;
      });
      return i;
    },
  },
  watch: {},
  methods: {
    chanshu(id) {
      this.$emit("chanshu", id);
      console.log(id);
    },
    zhengjia(count) {
      this.$emit("zhengjia", count);
    },
    jianshao(count) {
      this.$emit("jianshao", count);
    },
    jiesuan() {
      const jiesuan = this.list.filter((item) => {
        return (item.isSelected = true);
      });
      let i = 0;
      jiesuan.forEach((item) => {
        i += item.count * item.price
      });
      this.maney = i
      return i
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>
<style scoped>
/* 公共样式 */
.clearfix {
  content: "";
  display: block;
  clear: both;
}

.red {
  color: #f30213;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 清除默认样式 */
* {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}

a {
  text-decoration: none;
  color: #333;
}

input {
  outline: none;
}

.wrap {
  width: 1180px;
  margin: 0 auto;
}

.wrap .location {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.cartTable {
  border: 1px solid #ccc;
}

.cartTable tr.title {
  background-color: rgb(241, 243, 244);
  font-weight: bold;
}

.cartTable tbody tr td {
  /* border: 1px solid rgb(245, 245, 245); */
  padding: 10px;
}

/* 原价 */
.cartTable tbody tr td .tdl {
  text-decoration: line-through;
  color: #999;
}

/* 商品数量 */
.cartTable tr .amount .unum {
  width: 70px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  float: left;
}

/* 数量加减按钮 */
.cartTable tr .amount a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.cartTable tr .amount a.Increase {
  border-right: none;
  float: left;
}

.cartTable tr .amount a.Reduce {
  border-left: none;
  float: left;
}

.cartTable tr.count .jiesuan .right {
  text-align: right;
}

.cartTable tr.count .jiesuan .right p {
  margin: 5px 0;
}

.cartTable tr.count .jiesuan .right .pay {
  display: block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background-color: #f30213;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
</style>